<!--第一天   7、toRefs-->
<script setup lang="ts">
import {reactive, toRefs} from "vue";
import useMousePosition from "@/hooks/useMousePosition.ts";

/*let obj=reactive({
  name:'张三',
  age:19
})

function getAge(){
  // console.log(obj.age)
  obj.age++
  console.log(obj.age)
}*/


/*let obj=reactive({
  name:'张三',
  age:19
})

let age=obj.age
function getAge(){
  // console.log(obj.age)
  age++
  console.log(age)    //页面中展示的age没有++，控制台打印出来的age++了，解决方法toRefs
}*/



// toRefs    利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性
let obj=reactive({
  name:'张三',
  age:19
})

// console.log(toRefs(obj))
// console.log(toRefs(obj).age.value)

// 解构赋值
let {age}=toRefs(obj)
// console.log({age})

function getAge(){
  age.value++
  console.log(age.value)    //页面中展示的age++，控制台打印出来的也age++
}



// 使用hooks函数
// console.log(useMousePosition())
// 第一种方式
// let {x,y}=useMousePosition()

// 当用第二种方式写时，要用toRefs写，不然页面中展示的数据不变
let {x,y}=toRefs(useMousePosition())
// console.log(x)
// console.log(x.value)    //0
</script>

<template>

  <!-- //使用hooks函数 -->
  <p>{{x}}---{{y}}</p>


  toRefs
  <p>{{obj.age}}-----{{age}}</p>
  <button @click="getAge">getAge</button>
</template>

<style scoped>

</style>
